
//webpack是基于node运行的
const path = require('path');
//让index页面直接在项目根目录运行
const htmlWebpackPlugin = require('html-webpack-plugin');

//Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的
const VueLoaderPlugin = require('vue-loader/lib/plugin');

//webpack和webpack-dev-server命令都是基于配置文件入口和出口运行的,因为这两个命令省略了手动的出口和出口
module.exports = {
    entry: path.join(__dirname, './src/main.js'), // 入口文件
    output: { // 指定输出选项
      path: path.join(__dirname, './dist'), // 输出路径
      filename: 'bundle.js' // 指定输出文件的名称
    },
    plugins: [
      new htmlWebpackPlugin({
        template: path.join(__dirname,'./src/index.html'),
        filename: 'index.html'
      }),
      new VueLoaderPlugin() 
     
    ],
    //配置所有第三插件
    module: {
      rules: [
        {test: /\.css$/,use: ["style-loader","css-loader"]},
        {test: /\.less$/,use: ['style-loader','css-loader','less-loader']},
        {test: /\.scss$/,use: ['style-loader','css-loader','sass-loader']},
        {test: /.jpg|png|gif|bmp|jpeg$/,use: "url-loader?limit=7630&name=[hash:8]-[name].[ext]"},
        {test: /.ttf|eot|svg|woff|woff2$/,use: "url-loader"},
        {test: /.js$/,use: 'babel-loader',exclude: /node_modules/},
        {test: /.vue$/,use: 'vue-loader'}
      ]
    },
    resolve: {
      //修改 Vue 被导入时候的包的路径
      alias: {
        "vue$": "vue/dist/vue.js"
      }
    } 
}